<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link href="css/comment.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div id="app">

        <ul>
            <li>{{ msg }}</li>

            <li>
                <div v-model="link">
                </div>
            </li>

            <li><a v-bind:href="url">百度链接</a></li>

            <li><img v-bind:src="imgUrl" height="300px" width="450px"></li>

            <li>
                <!-- 图片 -->
                <img :src="imgSrc" height="300px" width="450px">
            </li>

            <li>

                <div class="color num">
                    <h1>绑定class的几种方法</h1>
                </div>
            </li>

            <li>
                <!-- 对象语法 -->
                <!-- true:是显示 falst:是消失 -->
                <div :class="{'active': isActive, 'error':isError}">
                    <h1>vue基础</h1>
                </div>
            </li>

            <li>
                <!--:class等同于v-bind:class -->
                <div :class="classes">
                    <h1>hhh</h1>
                </div>
            </li>

            <li>
                <!--数组语法  -->
                <div :class="[activedCls,errorCls]">
                    <h1>猎杀时刻</h1>
                </div>
            </li>

            <li>
                <div :class="[isActived ? activedClse :'',errorClse]">
                    <h1>学识宝石</h1>
                </div>
            </li>

            <li>
                <!-- 绑定内联样式 -->
                <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
            </li>

            <li>
                <!-- v-cloak:会在Vue实例结束编译时从绑定的HTML移除，和diaplay:none配合使用 -->
                <div v-cloak>
                    {{message}}
                </div>
            </li>
            <li>
                <p v-if="status === 1">当stutas为1时显示该行</p>
                <p v-else-if="status === 2">当stutas为2时显示该行</p>
                <p v-else>否则显示该行</p>
            </li>
            <li>
               <template v-if="status ===4">
                    <p>这是一段文本</p>
                    <p>这是一段文本</p>
               </template> 
            </li>
        </ul>
    </div>

</body>


<script>

    var app = new Vue({
        el: '#app',
        data: {
            msg: "vue.js实例",
            link: '<h1>百度一下</h1>',
            url: 'https://baidu.com',
            imgUrl: 'img/timg.jpg',
            imgSrc: 'img/timg (1).jpg',
            isActive: true,
            isError: true,
            error: null,
            activedCls: 'active',
            errorCls: 'error',
            color: 'red',
            fontSize: 100,
            isActived: true,
            activedClse: 'active',
            errorClse: 'error',
            message: 'Vue',
            status:2,
            status:4

        },
        mounted: function () {
            console.log('01');
        },
        created: function () {
            console.log('02', new Date().toLocaleString());
        },
        computed: {
            classes: function () {
                return {
                    active: this.isActive && !this.error,
                    'text-fail': this.error && this.error.type === 'fail'
                }
            }
        }


    })
</script>

</html>